<script setup>
import { onMounted, ref, nextTick } from 'vue';
import muuri from 'muuri';

const compoentsList = ref([1,2,3,4,5])
const perviewList = ref([])

const componetsMuuri = ref()
const componetsMuuriInit = () => {
  componetsMuuri.value = new muuri('.componets-list', {
    dragEnabled: true,
    dragSort: function () {
      return [componetsMuuri.value, perviewMuuri.value]
    }
  })
}

const perviewMuuri = ref()
const perviewMuuriInit = () => {
  perviewMuuri.value = new muuri('.perview-board', {
    dragEnabled: true,
  })
}

const getPerviewData = () => {
  console.log(perviewMuuri.value.getItems());
}
const addCard = () => {
  compoentsList.value.push(compoentsList.value.length+1)
  nextTick(() => {
    componetsMuuri.value.add([document.getElementById(compoentsList.value.length)])
  })
}

onMounted(() => {
  componetsMuuriInit()
  perviewMuuriInit()
  // eslint-disable-next-line no-undef
  // console.log(DocsAPI);
})
</script>

<template>
  <div class="container">
    <div class="componets-list">
      <div class="item" v-for="item in compoentsList" :key="item" :id="item">
        <div class="item-content">
          <a-card>
            {{item}}
          </a-card>
        </div>
      </div>
    </div>

    <div class="perview-board">
      <div class="item" v-for="item in perviewList" :key="item" :id="item">
        <div class="item-content">
          <a-card>
            {{item}}
          </a-card>
        </div>
      </div>
    </div>
  </div>
  <a-button type="primary" @click="getPerviewData" >获取预览看板数据</a-button>
  <a-button type="primary" @click="addCard" >添加新卡片</a-button>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-between;
  .componets-list {
    position: relative;
    width: 150px;
  }
  .item {
      position: absolute;
      width: 100px;
      margin: 10px;
      cursor: move;
      .item-content {
        width: 100%;
        height: 100%;
      }
    }
  .perview-board {
    flex: 1;
    position: relative;
    min-height: 600px;
    border: 1px solid #eee;
  }
}
</style>